<template>
    <div rich-uploader-component class="rich-uploader">
        <form ref="uploader" :action="action" method="post" enctype="multipart/form-data">
            <input ref="input" type="file" :name="name" :accept="accept" @change="onFileSelected">
        </form>
        <div v-if="file.status === 'empty'" class="tip" @click="onUploadClicked">
            <div class="center">
                <icon type="ios-cloud-upload" size="52" style="color: #3399ff"></icon>
                <p>{{uploadTip}}</p>
            </div>
        </div>
        <div v-else-if="file.status === 'pending'">
            <!--<i-circle class="center" :percent="file.percent">
                <span style="font-size:24px">{{file.percent}}%</span>
            </i-circle>-->
            <Spin fix>
                <Icon type="load-c" size=52 class="demo-spin-icon-load"></Icon>
            </Spin>
            <div class="cover" @click="onCancelClicked">
                <icon class="center" type="ios-close-empty" size="52"></icon>
            </div>
        </div>
        <div v-else-if="file.status === 'failed'">
            <i-circle class="center" :percent="file.percent" stroke-color="#ff5500">
                <Icon type="ios-close-empty" size="50" style="color:#ff5500"></Icon>
            </i-circle>
            <div class="cover" @click="onCancelClicked">
                <icon class="center" type="ios-close-empty" size="52"></icon>
            </div>
        </div>
        <div v-else class="finished">
            <img class="image center" :src="file.path">
            <div class="cover" @click="onRemoveClicked">
                <icon class="center" type="ios-trash-outline" size="52"></icon>
            </div>
        </div>
    </div>
</template>

<script>
import _ from '../../libs/utils'

export default {
    props:[
        'tip'
    ],
    data(){
        return{
            name:'filename',
            file: { id:0, path:'', status:'empty', percent:0 },
            action:'/api/file/uploadImage',
            maxSize:2048
        }
    },
    computed:{
        uploader(){
            return this.$refs.uploader;
        },
        input(){
            return this.$refs.input;
        },
        accept(){
            return 'image/jpg,image/jpeg,image/png,image/gif';
        },
        uploadTip(){
            return this.tip || "上传图片";
        }
    },
    methods:{
        initImage(image){
            if(!image)
                return;

            this.file.id = image.id;
            this.file.path = image.path;
            this.file.status = 'finished';
            this.file.percent = 100;
        },

        onUploadClicked(){
            this.input.click();
        },

        async onRemoveClicked(){
            this.input.file = '';
            setTimeout(x=>this.file.status = 'empty',200)
        },

        async onCancelClicked(){
            this.input.file = '';
            this.file.status = 'empty';
        },

        async onFileSelected(){
            
            this.file.status = 'pending';
            try{
                let ret = await this.uploadImage();
                if(ret.stat != 'ok'){
                    this.file.status = 'failed';
                    await this.onUploadFailed(ret);
                    return;
                }               
                this.input.value = '';
                this.file.percent = 100;
                this.file.status = 'finished';
                await this.onUploadSuccess(ret.ret);

            }catch(e){
                this.input.value = '';
                this.file.status = 'failed';
                this.onUploadFailed({stat:'netError', err:e});
            }

        },
        async onUploadSuccess(r){
            this.file.id = r.id;
            this.file.path = r.path;
            this.$emit('on-success', this.file);
        },

        onUploadProgress(p){
            this.file.percent = p;
        },

        async onUploadFailed(e){
            this.$emit('on-failed', e);
        },

        async uploadImage(){
            this.file.percent = 10;         
            var data = new FormData(this.uploader);
            return await _.ajax.form({
                url:this.action,
                data:data,
                onProgress:this.onUploadProgress
            })
        }
    }
}
</script>

<style scoped>
    [rich-uploader-component] {
        padding: 0px;        
    }

    .rich-uploader > form > input{
        display: none;
    }

    .rich-uploader > div {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        position: relative;
        cursor: pointer;
        text-align: center;   
        border: 1px dashed #dddee1;
        border-radius: 4px;
        background: #fff;
        overflow: hidden;
    }

    .rich-uploader > div:hover{  
        border: 1px dashed #349cfb;
    }

    .rich-uploader > div.finished{  
        border: 1px solid #999;
        background: #666;
    }

    .rich-uploader > div .cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 88;
        background: rgba(0,0,0,.6);
    }   

    .rich-uploader > div .image{
        max-width: 100%;
        vertical-align: middle;
    }

    .rich-uploader > div:hover .cover{
        display: block;
        text-align: center;
    }

    .rich-uploader > div .cover i{
        color: #fff;
        cursor: pointer;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    .rich-uploader > div .center{
        display: inline-block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }

    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
 
</style>